<template>
  <div :class="{ hidden: hidden }">
    <div
      :class="{
        'single-pagination-container': cockpit,
        'pagination-container': !cockpit,
      }"
    >
      <el-pagination
        :background="background"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :layout="layout"
        :page-sizes="pageSizes"
        :pager-count="pagerCount"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "Pagination",
};
</script>

<script setup>
import { scrollTo } from "@/utils/scroll-to";

const props = defineProps({
  total: {
    required: true,
    type: Number,
  },
  page: {
    type: Number,
    default: 1,
  },
  limit: {
    type: Number,
    default: 10,
  },
  pageSizes: {
    type: Array,
    default() {
      return [5, 10];
    },
  },
  // 移动端页码按钮的数量端默认值5
  pagerCount: {
    type: Number,
    default: document.body.clientWidth < 992 ? 5 : 7,
  },
  layout: {
    type: String,
    default: "total, sizes, prev, pager,next, jumper",
  },
  background: {
    type: Boolean,
    default: true,
  },
  autoScroll: {
    type: Boolean,
    default: true,
  },
  hidden: {
    type: Boolean,
    default: false,
  },
  cockpit: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits();
const currentPage = computed({
  get() {
    return props.page;
  },
  set(val) {
    emit("update:page", val);
  },
});
const pageSize = computed({
  get() {
    return props.limit;
  },
  set(val) {
    emit("update:limit", val);
  },
});
function handleSizeChange(val) {
  if (currentPage.value * val > props.total) {
    currentPage.value = 1;
  }
  emit("pagination", { page: currentPage.value, limit: val });
  if (props.autoScroll) {
    scrollTo(0, 800);
  }
}
function handleCurrentChange(val) {
  emit("pagination", { page: val, limit: pageSize.value });
  if (props.autoScroll) {
    scrollTo(0, 800);
  }
}
</script>

<style lang="scss" scoped>
.pagination-container {
  //background: #fff;
  padding: 32px 16px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.pagination-container.hidden {
  display: none;
}
.single-pagination-container {
  margin: 0;
  display: flex;
  justify-content: center;

  :deep .el-pagination > .is-first {
    color: #ffffff;
  }

  :deep .el-pagination__goto,
  :deep .el-pagination__classifier {
    color: #ffffff;
  }

  :deep .el-pagination.is-background .btn-next,
  :deep .el-pagination.is-background .btn-prev,
  :deep .el-pagination.is-background .el-pager li {
    border: 1px solid #44aeff;
    background-color: rgba(9, 27, 35, 0.8);
    color: #ffffff !important;
  }

  :deep .el-pagination.is-background .btn-next.is-active,
  :deep .el-pagination.is-background .btn-prev.is-active,
  :deep .el-pagination.is-background .el-pager li.is-active {
    background-color: #44aeff;
    color: #ffffff !important;
  }

  :deep .popper__arrow {
    border: 1px solid #44aeff;
  }

  :deep .el-input__wrapper {
    padding: 0;
    border: none;
    background-color: rgba(9, 27, 35, 0.8);
    color: #ffffff !important;
  }

  :deep .el-input__inner {
    border: 1px solid #44aeff !important;
    border-radius: 3px;
  }

  :deep .el-pagination > .is-first {
    margin-left: 0 !important;

    :deep .el-pagination > .is-first {
      margin-left: 0 !important;
      color: #ffffff;
    }
    :deep .el-input__wrapper {
      //background-color: rgba(0, 168, 255, 0.6);
      //border: 0.6px rgba(255, 255, 255, 0.6) solid;
      background: rgba(26, 42, 33, 0.2) !important;
      border: 1px solid #44aeff;
      color: #ffffff;
    }
    :deep .el-select .el-input__inner {
      color: #ffffff;
    }
    :deep .el-pager li:disabled {
      background: rgba(26, 42, 33, 0.2) !important;
      border: 1px solid #44aeff;
    }
    :deep .el-pagination > .is-last {
      color: #ffffff;
    }
    :deep .el-pagination .el-input__inner {
      color: #ffffff;
    }
    :deep .el-pagination.is-background .el-pager li.is-active {
      color: #ffffff;
      background-color: rgba(0, 168, 255, 0.6) !important;
      border: 0.6px rgba(255, 255, 255, 0.6) solid;
    }
    :deep .el-pagination.is-background .el-pager li {
      color: #ffffff;
      background: rgba(26, 42, 33, 0.2) !important;
      border: 1px solid #44aeff;
    }
    :deep .el-pagination.is-background .btn-prev {
      background: rgba(255, 255, 255, 0) !important;
      color: #ffffff;
    }
    :deep .el-pagination.is-background .btn-next {
      background: rgba(255, 255, 255, 0) !important;
      color: #ffffff;
    }
  }
}
</style>
